<template>
  <div style="width: 260px;height: 100%;background:#001529">
    <!-- <a-button type="primary" style="margin-bottom: 16px" @click="toggleCollapsed">
      <a-icon :type="collapsed ? 'menu-unfold' : 'menu-fold'" />
    </a-button> -->
    <a-menu
      :default-selected-keys="['1']"
      :default-open-keys="['sub1']"
      mode="inline"
      theme="dark"
      :inline-collapsed="collapsed"
    >
      <a-menu-item key="1" @click="onClickLeftTab(0)">
        <a-icon type="pie-chart" />
        <span>搜索用户</span>
      </a-menu-item>
      <a-menu-item key="2" @click="onClickLeftTab(1)">
        <a-icon type="desktop" />
        <span>添加工具</span>
      </a-menu-item>
      <a-menu-item key="3" @click="onClickLeftTab(2)">
        <a-icon type="inbox" />
        <span>添加管理员</span>
      </a-menu-item>
      <a-menu-item key="4" @click="onClickLeftTab(3)">
        <a-icon type="inbox" />
        <span>管理工具</span>
      </a-menu-item>
    </a-menu>
  </div>
</template>

<script>
export default {
  data() {
    return {
      collapsed: false,
    };
  },
  methods: {
    toggleCollapsed() {
      this.collapsed = !this.collapsed;
    },
    onClickLeftTab(position){
      this.$parent.tabPosition = position;
    },
  },
};
</script>
